<template>
  <div class="app">
    <Cate-header v-if="headerflag" />
    <div class="container">
      <van-overlay :show="loading">
        <div class="wrapper">
          <van-loading vertical text-color="#0094ff"> 加载中... </van-loading>
        </div>
      </van-overlay>
      <transition
        enter-active-class="animate_animated animate_bounce"
        leave-active-class="animate_animated animate_bounce"
      >
        <router-view></router-view>
      </transition>
      <!-- <router-view v-slot="{ Component }">
        <transition
          enter-active-class="animate_animated animate_bounce"
          leave-active-class="animate_animated animate_bounce"
        >
          <component :is="Component" />
        </transition>
      </router-view> -->
    </div>
    <Cate-footer v-if="footeflag" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch, computed } from "vue";
import CateFooter from "./components/CateFooter/index.vue";
import CateHeader from "./components/CateHeader/index.vue";
import { useRoute } from "vue-router";
import { loadingStore } from "./utils/request";

export default defineComponent({
  components: {
    CateFooter,
    CateHeader,
  },
  setup() {
    const state = reactive({
      footeflag: false,
      headerflag: false,
    });
    const route = useRoute();
    const loadingState: any = loadingStore.state;
    const loading = computed(() => loadingState.loading?.loading);
    const footerArr = [
      "/postage",
      "/catelist",
      "/crazy",
      "/half",
      "/discount",
      "/brand",
      "/mother",
      "/search",
    ];
    const headerArr = [
      "/home",
      "/postage",
      "/mine",
      "/collect",
      "/crazy",
      "/half",
      "/discount",
      "/brand",
      "/register",
      "/login",
      "/mother",
      "/search",
    ];

    const checkFooter = () => {
      const currentPath = route.path;
      const f = footerArr.some((item) => currentPath.indexOf(item) !== -1);
      if (f) {
        state.footeflag = false;
      } else {
        state.footeflag = true;
      }
    };
    const checkHeader = () => {
      const currentPath = route.path;
      const f = headerArr.some((item) => currentPath.indexOf(item) !== -1);
      if (f) {
        state.headerflag = false;
      } else {
        state.headerflag = true;
      }
    };
    watch(route, () => {
      checkFooter();
      checkHeader();
    });
    return {
      ...toRefs(state),
      loading,
    };
  },
});
</script>
<style lang="stylus">
.van-popover
  width 100%
  left 0 !important
  top .73rem !important
  .van-grid
    width 100%
    .van-grid-item
      width 25%
      display flex
      flex-direction column
      justify-content center
      align-items center
      font-size .14rem
      .van-image
        width 0.49rem
        height 0.49rem
        img
          width 100%
          height 100%
      span
        font-size .14rem
        color #666
        line-height .25rem
        padding-top .07rem
.van-dialog__message {
  color: red;
}

.van-popover[data-popper-placement=bottom] .van-popover__arrow {
  left: 94.5%;
}

.van-overlay {
  z-index: 999;
}

html, body, .app {
  width: 100%;
  height: 100%;
  font-size: 0.12rem;
}

.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .container {
    width: 100%;
    height: 100%;
    flex: 1;

    .wrapper {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
